<template>
  <van-row class="register_wrap">
    <van-col span="24">
      <van-form>
        <van-field
          :rules="[{ required: true, message: '请填写用户名' }]"
          v-model="username"
          name="用户名"
          label="用户名"
          placeholder="用户名"
        />
        <van-field
          :rules="[{ required: true, message: '请填写密码' }]"
          v-model="password"
          type="password"
          name="密码"
          label="密码"
          placeholder="密码"
        />
        <van-field
          :rules="[{ required: true, message: '请确认密码' }]"
          v-model="again_password"
          type="password"
          name="确认密码"
          label="确认密码"
          placeholder="确认密码"
        />
        <div style="margin: 16px">
          <van-button
            round
            block
            type="info"
            native-type="submit"
            @click="submitRegister"
          >提 交</van-button
          >
        </div>
      </van-form>
    </van-col>
  </van-row>
</template>

<script>
import api from '@/api/user'
export default {
  data() {
    return {
      username: '',
      password: '',
      again_password: ''
    }
  },
  methods: {
    submitRegister() {
      if (!this.username || !this.password || !this.again_password) {
        this.$toast.fail('请填写信息')
        return
      }
      if (this.password !== this.again_password) {
        this.$toast.fail('两次密码输入不一致')
        return
      }
      const params = {
        username: this.username,
        password: this.password,
        again_password: this.again_password
      }
      api.register(params).then((res) => {
        if (parseInt(res.code) === 200) {
          this.$toast.success({
            message: '注册成功',
            duration: 2000,
            onClose: () => {
              this.$router.replace({ name: 'UserInfo' })
            }
          })
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.register_wrap {
}
</style>
